前兩天介紹了 transform 與 transition，我們已經能讓網頁元素改變位置、大小或角度，並在滑鼠移入、點擊等狀態改變時，以更平順的方式呈現效果。

不過，當動畫需要自動播放、重複執行，或是在過程中經過多個變化階段時，只靠 transition 就不夠靈活了。這時就可以使用 CSS 的 animation 屬性，讓元素依照預先設定的節奏動起來。

今天要來認識 animation 與 @keyframes 的基本用法，學會建立淡入、彈跳與旋轉等動畫效果，為網頁加入更豐富的動態表現。Σ Σ Σ (」○ ω○ )／

Animation 動畫效果

animation 是 CSS 中另一個重要的動態效果工具。相較於 transition 只能處理兩個狀態間的變化且需要使用者觸發，animation 提供了更強大且靈活的動畫控制能力，它可以定義多個階段的動畫效果，並且能自動播放，無需使用者觸發。

使用 animation 屬性之前，需要先定義動畫。使用 @keyframes 規則來定義動畫的各個階段，可以設定任意數量的關鍵幀。

/* 基本語法 */
@keyframes 動畫名稱 {
  from { /* 起始狀態 */ }
  to { /* 結束狀態 */ }
}

/* 使用百分比定義多個階段 */
@keyframes 動畫名稱 {
  0% { /* 起始狀態 */ }
  50% { /* 中間狀態 */ }
  100% { /* 結束狀態 */ }
}

範例：

/* 淡入動畫 */
@keyframes fadeIn {
  from {
 opacity: 0;
 }
  to {
 opacity: 1;
 }
}

/* 複雜的彈跳動畫 */
@keyframes bounce {
  0%, 100% {
 transform: translateY(0);
 }
  25% {
 transform: translateY(-20px);
 }
  50% {
 transform: translateY(-10px);
 }
  75% {
 transform: translateY(-5px);
 }
}

將 @keyframes 定義完成後，就可以使用 animation 屬性將動畫套用到元素上：

/* 基本語法 */
animation: 動畫名稱 持續時間 時間函數 延遲時間 播放次數 方向 填充模式;

.element {
  /* 簡單範例 */
  animation: fadeIn 1s ease-in;
  /* 完整範例 */
  animation: bounce 2s ease-in-out 0.5s infinite alternate forwards;
}

Animation 完整屬性語法

animation 簡寫屬性包含以下子屬性：

1. animation-name：指定 @keyframes 的名稱
2. animation-duration：動畫持續時間（設定類似與 transition-duration）
3. animation-timing-function：時間函數（設定類似與 transition-timing-function）
4. animation-delay：延遲時間（設定類似與 transition-delay）
5. animation-iteration-count：動畫播放次數
6. animation-fill-mode： 動畫填充模式
7. animation-direction：動畫播放方向
8. animation-play-state：動畫播放狀態

.element {
  /* 分開設定各個屬性 */
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

Animation-iteration-count 動畫播放次數

animation-iteration-count 設定動畫重複播放的次數。

.element {
  animation-iteration-count: 1;        /* 播放 1 次(預設) */
  animation-iteration-count: 3;        /* 播放 3 次 */
  animation-iteration-count: infinite; /* 無限循環播放 */
}

Animation-direction 動畫播放方向

animation-direction 設定動畫的播放方向，正常播放或是反向播放等。

.element {
  animation-direction: normal;            /* 正常播放(預設) */
  animation-direction: reverse;           /* 反向播放 */
  animation-direction: alternate;         /* 來回交替播放 */
  animation-direction: alternate-reverse; /* 反向開始的來回播放 */
}

Animation-fill-mode 動畫填充模式

animation-fill-mode 設定動畫播放前與播放後的元素狀態。

.element {
  animation-fill-mode: none;      /* 動畫播放前後回到元素原始樣式 (預設) */
  animation-fill-mode: forwards;  /* 動畫結束後保持最後一幀的狀態 */
  animation-fill-mode: backwards; /* 延遲期間套用第一幀的狀態 */
  animation-fill-mode: both;      /* 結合 forwards 和 backwards */
}

Animation-play-state 動畫播放狀態

animation-play-state 控制動畫的播放和暫停。

.element {
  animation-play-state: running; /* 播放中(預設) */
  animation-play-state: paused;  /* 暫停 */
}

多重動畫

一個元素可以同時套用多個動畫，使用逗號分隔：

.element {
  animation:
    fadeIn 1s ease,
    slideUp 1s ease,
    rotate 2s linear infinite;
}

/* 或分開設定 */
.element {
  animation-name: fadeIn, slideUp, rotate;
  animation-duration: 1s, 1s, 2s;
  animation-timing-function: ease, ease, linear;
  animation-iteration-count: 1, 1, infinite;
}

使用範例

• 載入動畫：使用不同顏色的 1/4 圓形邊框並設定旋轉動畫，製作簡單的載入動畫效果。

  .spinner {
    width: 50px;
    height: 50px;
    border: 10px solid #f3f3f3;
    border-top: 10px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  

  

• 原地縮放動畫：常用於特價商品或需要吸引注意的元素，可以製造視覺焦點。

  .pulse {
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    animation: pulse 2s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.8;
    }
  }
  

• 淡入效果：讓元素從透明狀態逐漸顯示，常用於頁面載入或動態新增內容時提供平滑的視覺過渡。元素的初始透明度設為 0，執行後透明度設為 1 ，並使用 forwards 屬性讓元素在動畫結束後保持最終狀態。

  .fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  

使用建議

1. 選擇合適的動畫類型：transition 適合製作簡單且需要互動才產生回饋的動畫，animation 則適合製作較複雜且無須互動就可以自動播放的動畫。
2. 效能考量：操控元素動畫時，優先使用 transform 和 opacity 等不影響介面排版的屬性來控制動畫，避免在 @keyframes 中大量使用會觸發重排的屬性，如 width、height、margin 或 padding 等。
3. 使用者體驗：避免過於頻繁或強烈的動畫，影響使用者的注意力和網頁閱讀體驗。

總結

這幾天探討了變形與過渡效果的運用，從基本的 transform 變形屬性、transition 過渡效果到 animation 動畫製作。透過這些具體技術和範例，你現在能夠：

1. 使用 transform 屬性進行元素的位移、旋轉、縮放和傾斜等變形效果
2. 透過 transition 屬性創造平滑的狀態過渡效果
3. 使用 @keyframes 和 animation 相關屬性製作複雜的動畫效果
4. 根據不同情境選擇適當的動畫類型並注意效能最佳化

掌握這些技巧後，你可以為網頁元素增添生動的互動效果，提升使用者體驗，讓你的網頁不再只是靜態的畫面。